<template>
<div class="row">
    <div id="home" class="col-sm-12 text-center">
        <div class="background">
            <h1>欢迎大家品尝pizza！</h1>
            <h2>这里各种款式的pizza！供大家选择</h2>
            <button @click="goToMenu" class="btn btn-success"> let's order!</button>
        </div>
    </div>
     <!-- <h1>Home</h1> -->
     <!-- <button @click="goToMenu" class="btn-success">Let's order!</button> -->
</div>
</template>
<script>
    export default{
        methods:{
            goToMenu(){
                //跳转到上一次浏览的页面
                // this.$router.go(-1);
                //指定跳转的页面
                // this.$router.replace("/login")
                //指定跳转路由的名字下
                // this.$router.replace({name:'loginLink'})
                //通过push进行跳转
                // this.$router.push("/login")
                this.$router.push({name:'loginLink'})
            }
        }
    }
</script>
<style >
    #home{
        background: url("../../src/assets/timg (1).jpg") no-repeat;
        height: 90vh;
        padding: 10%;        
    }
    h1,h2{
        margin: 6%;
    }
    .background{
          background-color: #eee;
          opacity: 0.7;
          max-width: 75vw;
          margin: auto;
          padding: 20px 0;
        }
</style>
